<template>
    <div>
        <el-form :inline="true">
            <el-form-item label="退料单编号">
                <el-input v-model="menu.ipAddr" placeholder="请输入SN码"></el-input>
            </el-form-item>

            <el-form-item label="生产工单">
                <el-input v-model="menu.userName" placeholder="请输入产品物料编码"></el-input>
            </el-form-item>
            <el-form-item label="仓库名称">
                <el-input v-model="menu.loginLocation" placeholder="请输入产品物料名称"></el-input>
            </el-form-item>

            <el-button type="primary" @click="search" style="margin-bottom: 20px;">
                <el-icon style="margin-right: 10px;"><Search /></el-icon>搜索
            </el-button>
        </el-form>

        <el-button type="primary" :disabled="selectedRows.length === 0" @click="bulkDelete">批量删除</el-button>

        <el-table :data="salesorder" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50"></el-table-column>
            <el-table-column prop="logId" label="退料单编号" width="150"></el-table-column>
            <el-table-column prop="userName" label="退料单名称" width="150"></el-table-column>
            <el-table-column prop="browser" label="生产工单" width="150"></el-table-column>
            <el-table-column prop="loginLocation" label="仓库名称" width="150"></el-table-column>
            <el-table-column prop="ipAddr" label="库区名称" width="150"></el-table-column>
            <el-table-column prop="os" label="库位名称" width="150"></el-table-column>
            <el-table-column prop="loginTime" label="退料日期" width="150"></el-table-column>
            <el-table-column prop="status" label="单据状态" width="150"></el-table-column>

            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog :destroy-on-close="true" :title="title" v-model="visible" style="width: 1250px;">
            <router-view :data="data" @close="close"></router-view>
        </el-dialog>

        <div class="demo-pagination-block">
            <el-pagination 
                v-model:current-page="page.current" 
                v-model:page-size="page.size"
                :page-sizes="[10, 20, 30, 40, 50]" 
                layout="total, sizes, prev, pager, next, jumper" 
                :total="page.total"
                @size-change="handleSizeChange" 
                @current-change="handleCurrentChange" 
            />
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Search, Refresh, Delete, Plus, Edit } from '@element-plus/icons-vue';

// 数据声明
const menu = ref({
    ipAddr: '',
    userName: '',
    loginLocation: '' // 应将这个属性改为正确的属性名称
});
const salesorder = ref([]); // 表格数据
const page = ref({
    current: 1,
    size: 5,
    total: 0,
});
const visible = ref(false); // 控制对话框显示
const title = ref('');
const selectedRows = ref([]); // 选中行的数组

// 页面挂载时调用搜索
onMounted(() => {
    search();
});

// 搜索功能
const search = async () => {
    try {
        const response = await axios.post('/api/path/to/search', menu.value); // 更换为实际的 API 路径
        salesorder.value = response.data; // 将 API 返回的数据赋给表格
        // 更新分页相关数据，如果需要
        // page.value.total = response.total; // 例如根据实际情况更新总页数
    } catch (error) {
        ElMessage.error('搜索失败');
        console.error('搜索失败:', error);
    }
};

// 选择变更处理
const handleSelectionChange = (val) => {
    selectedRows.value = val; // 更新选中行
};

// 当前页改变
const handleCurrentChange = (currentPage) => {
    page.value.current = currentPage; // 更新当前页
    search(); // 重新查询数据
};

// 每页显示条数改变
const handleSizeChange = (size) => {
    page.value.size = size; // 更新每页大小
    page.value.current = 1; // 重置为第一页
    search(); // 重新查询数据
};

// 批量删除
const bulkDelete = async () => {
    if (selectedRows.value.length === 0) {
        ElMessage.warning('请先选择要删除的记录');
        return;
    }

    ElMessageBox.confirm(`确定要删除选中的记录吗？`, '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
    }).then(async () => {
        const idsToDelete = selectedRows.value.map(row => row.logId); // 获取需要删除的记录ID
        try {
            await axios.post('/api/path/to/delete', { ids: idsToDelete }); // 确保这条 API 路径正确
            search(); // 删除后刷新数据
            selectedRows.value = []; // 清空选中记录
            ElMessage.success('删除成功');
        } catch (error) {
            ElMessage.error('删除失败');
            console.error('删除失败:', error);
        }
    }).catch(() => {
        ElMessage.info('已取消删除');
    });
};

// 编辑处理
const handleEdit = (row) => {
    // 根据需求实现编辑逻辑
    console.log('编辑:', row);
};

// 删除处理
const handleDelete = async (row) => {
    const confirm = await ElMessageBox.confirm(`确定要删除记录 ${row.logId} 吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
    });
    if (confirm) {
        try {
            await axios.post('/api/path/to/delete', { ids: [row.logId] }); // 确保这条 API 路径正确
            search(); // 删除后刷新数据
            ElMessage.success('删除成功');
        } catch (error) {
            ElMessage.error('删除失败');
            console.error('删除失败:', error);
        }
    }
};

// 关闭对话框
const close = () => {
    visible.value = false;
};
</script>

<style scoped>
.el-select {
    width: 150px; /* 调整下拉选择框的宽度 */
}
.demo-pagination-block {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}
</style>
